<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>识途-客户端后台管理系统</title>
    <script src="../../js/lib/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="../../js/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script src="../../js/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../../css/backstage.css">
    <script src="../../js/util/storageUtils.js"></script>
    <script src="../../js/constant/constants.js"></script>
    <script src="../../js/lib/axios.js"></script>
    <script src="../../js/util/security.js"></script>
    <script src="../../js/common/backstage.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="./device_list.html">识途后台系统</a>
        </div>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="../../index.html"><span class="glyphicon glyphicon-repeat"></span> 返回前台</a></li>
            <li><a id="logout"><span class="glyphicon glyphicon-log-in"></span> 登出</a></li>
        </ul>
    </div>
</nav>

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="list-group">
                <a href="device_list.html" class="list-group-item active">
                    <h4 class="list-group-item-heading">
                        设备信息
                    </h4>
                </a>
                <a href="device_list.html" class="list-group-item">
                    <h4 class="list-group-item-heading">
                        设备列表
                    </h4>
                    <p class="list-group-item-text">
                        您可以查看和添加你的设备。
                    </p>
                </a>
                <a href="./device_group_list.html" class="list-group-item">
                    <h4 class="list-group-item-heading active_choose">
                        设备分组
                    </h4>
                    <p class="list-group-item-text">
                        您可以对您的设备进行分组。
                    </p>
                </a>
                <a href="add_device.html" class="list-group-item">
                    <h4 class="list-group-item-heading">
                        新增设备
                    </h4>
                    <p class="list-group-item-text">
                        添加新的设备。
                    </p>
                </a>
                <a href="add_group.html" class="list-group-item">
                    <h4 class="list-group-item-heading">
                        新增分组
                    </h4>
                    <p class="list-group-item-text">
                        添加新的分组。
                    </p>
                </a>
            </div>

            <div class="list-group">
                <a href="../personal/personal_meg.html" class="list-group-item active">
                    <h4 class="list-group-item-heading">
                        隐私信息
                    </h4>
                </a>
                <a href="../personal/personal_meg.html" class="list-group-item ac">
                    <h4 class="list-group-item-heading">
                        个人信息
                    </h4>
                    <p class="list-group-item-text">
                        您个人注册的信息。
                    </p>
                </a>
                <a href="../personal/family_meg.html" class="list-group-item">
                    <h4 class="list-group-item-heading">
                        家人信息
                    </h4>
                    <p class="list-group-item-text">
                        您创建的家人账号信息。
                    </p>
                </a>
                <a href="../personal/add_family.html" class="list-group-item">
                    <h4 class="list-group-item-heading">
                        添加家人
                    </h4>
                    <p class="list-group-item-text">
                        新建与你关联的家人账号。
                    </p>
                </a>
                <a href="../personal/about_system.html" class="list-group-item">
                    <h4 class="list-group-item-heading">
                        关于系统
                    </h4>
                    <p class="list-group-item-text">
                        关于这个系统的来源。
                    </p>
                </a>
            </div>
        </div>
        <div class="col-md-8">
            <div class="device_block">
                <table class="table table-bordered">
                    <caption>
                        <div class="panel panel-default">
                            <div class="panel-body">
                                分组列表
                            </div>
                        </div>
                        <form class="bs-example bs-example-form row form-inline col-lg-offset-0" role="form">
                            <div class="input-group col-md-3">
                                <span class="input-group-addon">分组名</span>
                                <input type="text" class="form-control" id="groupName" placeholder="groupName">
                            </div>

                            <div class="input-group col-md-3">
                                <span class="input-group-addon">组描述</span>
                                <input type="text" class="form-control" id="description" placeholder="description">
                            </div>

                            <div class="input-group col-md-3">
                                <span class="input-group-addon">设备数</span>
                                <input type="text" class="form-control" id="count" placeholder="count">
                            </div>

                            <input type="button" class="btn btn-primary" id="searchBtn" value="查询">
                            <a type="button" class="btn btn-primary" id="toSavePage">新增</a>
                        </form>
                        <p></p>
                    </caption>
                    <thead>
                    <tr>
                        <th>分组名</th>
                        <th>组描述</th>
                        <th>本组设备数量</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="groupTbody">
                    <!-- 动态加载分组 -->
                    </tbody>
                </table>
            </div>
            <hr>
            <div class="device_block">
                <table class="table table-bordered">
                    <caption>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                所在组设备列表
                            </div>
                            <div id="currentGroup" class="panel-body">
                                default
                            </div>
                        </div>
                    </caption>
                    <thead>
                    <tr>
                        <th>设备名</th>
                        <th>设备分组</th>
                        <th>设备id</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="equipmentTbody">
                    <!-- 动态加载分组设备 -->
                    </tbody>
                </table>
            </div>
            <hr>
            <div class="device_block">
                <div class="panel panel-default">
                    <div class="panel-body">
                        分组信息
                    </div>
                </div>
                <form class="form-horizontal" role="form" onsubmit="return false">
                    <div class="form-group" style="display: none">
                        <div class="col-sm-10" style="width: 300px">
                            <input type="hidden" class="form-control" value="" id="groupId">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">组名</label>
                        <div class="col-sm-10" style="width: 300px">
                            <input type="text" class="form-control" value="无" id="groupNameInput" maxlength="10"
                                   disabled>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">分组描述</label>
                        <div class="col-sm-10" style="width: 300px">
                            <input type="text" class="form-control" value="无" id="groupDescription" maxlength="20"
                                   disabled>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">所有设备</label>
                        <div class="col-sm-10" id="equipCheckbox" style="width: 300px">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">本组设备数</label>
                        <div class="col-sm-10">
                            <p class="form-control-static" id="countText">0</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">创建时间</label>
                        <div class="col-sm-10">
                            <p class="form-control-static" id="createTime">xxxx-xx-xx</p>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" id="showed" disabled>主页中展示本组设备
                                </label>
                                &nbsp;&nbsp;
                                <label>
                                    <input type="checkbox" id="locked" disabled>禁用本组全部设备
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" id="saveBtn" class="btn btn-default">保存</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="moveModal"><!--modal,弹出层父级,fade使弹出层有一个运动过程-->
    <div class="modal-dialog"><!--modal-dialog,弹出层-->
        <div class="modal-content"><!--modal-content,弹出层内容区域-->
            <div class="modal-header">
                <button class="close" data-dismiss="modal">&times;</button><!--将关闭按钮放在标题前面可以使按钮位于右上角-->
                <h4>移动至</h4>
                <p style="display: none" id="currentEquipment"></p>
            </div><!--modal-header,弹出层头部区域-->
            <div class="modal-body">
                <select id="equipGroupNames" class="form-control form-control-placeholder">
                    <!-- 动态加载分组名 -->
                </select>
            </div><!--modal-body,弹出层主体区域-->
            <div class="modal-footer">
                <button class="btn btn-primary" id="moveBtn">确定</button>
                <!--data-dismiss="modal"点击按钮之后可以关闭窗口-->
            </div><!--modal-footer,弹出层底部区域-->
        </div>
    </div>
</div>

<script src="../../js/backstage/device/device_group_list.js"></script>
<!--<script>-->
<!--    let groupParams = {-->
<!--        groupName: '',-->
<!--        description: '',-->
<!--        count: ''-->
<!--    }-->

<!--    // 是否禁用分组信息表单-->
<!--    const formDisabled = (isDisable) => {-->
<!--        $('#groupNameInput').prop('disabled', isDisable)-->
<!--        $('#groupDescription').prop('disabled', isDisable)-->
<!--        $('#equipCheckbox input:not(:checked)').prop('disabled', isDisable)-->
<!--        $('#equipCheckbox input:checked').prop('disabled', true)-->
<!--        // console.log($('#equipCheckbox input:checked'))-->
<!--        $('#showed').prop('disabled', isDisable)-->
<!--        $('#locked').prop('disabled', isDisable)-->
<!--        $('#saveBtn').prop('disabled', isDisable)-->
<!--    }-->

<!--    // 点击移出分组按钮-->
<!--    const clickMove = (equipCode) => {-->
<!--        $('#equipGroupNames option:first').prop('selected', true)-->
<!--        $('#currentEquipment').text(equipCode)-->
<!--        $('#moveModal').modal('show')-->
<!--    }-->

<!--    // 确定移动分组-->
<!--    const equipmentMoveGroup = () => {-->
<!--        let targetGroupId = $('#equipGroupNames option:selected').val()-->
<!--        let currentGroupId = $('#groupId').val()-->
<!--        let equipCode = $('#currentEquipment').text();-->
<!--        if (targetGroupId === '-1') {-->
<!--            alert("请选择分组！")-->
<!--            return-->
<!--        }-->
<!--        if (targetGroupId === currentGroupId) {-->
<!--            $('#moveModal').modal('hide')-->
<!--            alert("修改成功")-->
<!--            return-->
<!--        }-->
<!--        let data = {-->
<!--            equipCode: equipCode,-->
<!--            groupId: targetGroupId-->
<!--        }-->
<!--        axios({-->
<!--            method: "put",-->
<!--            url: '/equipment',-->
<!--            headers: {'Authorization': getToken()},-->
<!--            data: data-->
<!--        }).then(resp => {-->
<!--            if (resp.data.success) {-->
<!--                $('#moveModal').modal('hide')-->
<!--                // 修改目标组设备数量-->
<!--                let $targetGroupCount = $('#group' + targetGroupId + ' td:eq(2)')-->
<!--                let targetOldCount = $targetGroupCount.text()-->
<!--                $targetGroupCount.text(Number.parseInt(targetOldCount) + 1)-->
<!--                // 修改当前组设备数量-->
<!--                let $currentGroupCount = $('#group' + currentGroupId + ' td:eq(2)')-->
<!--                let currentOldCount = $currentGroupCount.text()-->
<!--                $currentGroupCount.text(Number.parseInt(currentOldCount) - 1)-->
<!--                $('#equipment' + equipCode).remove()-->
<!--                alert("修改成功")-->
<!--            } else {-->
<!--                alert("系统繁忙，请稍后重试")-->
<!--            }-->
<!--        })-->
<!--    }-->

<!--    // 解析设备列表，并显示到屏幕上-->
<!--    const solveEquipments = (equipments, groupName) => {-->
<!--        $('#currentGroup').text(groupName)-->
<!--        if (equipments === null) return-->
<!--        let html = ''-->
<!--        equipments.forEach(equipment => {-->
<!--            html += `<tr id="equipment${equipment.equipCode}">`-->
<!--            html += `<td>${equipment.equipName}</td>`-->
<!--            html += `<td>${groupName}</td>`-->
<!--            html += `<td>${equipment.equipCode}</td>`-->
<!--            html += '<td>'-->
<!--            html += `<button type="button" class="btn btn-danger dropdown-toggle" onclick="clickMove(\'${equipment.equipCode}\')">`-->
<!--            html += '移出本组'-->
<!--            html += '</button>'-->
<!--            html += '</td>'-->
<!--            html += '</tr>'-->
<!--        })-->
<!--        $('#equipmentTbody').html(html)-->
<!--    }-->

<!--    // 查看某个分组的详细信息，由于获取分组之后可能还要执行其他操作，-->
<!--    // 所以我们返回一个Promise对象-->
<!--    const getGroupDetail = (gid) => {-->
<!--        return new Promise((resolve, reject) => {-->
<!--            axios({-->
<!--                method: "get",-->
<!--                url: `/equipGroup/${gid}`,-->
<!--                headers: {'Authorization': getToken()}-->
<!--            }).then(resp => {-->
<!--                console.log(resp.data.data)-->
<!--                if (!resp.data.success) {-->
<!--                    resolve(false)-->
<!--                    return-->
<!--                }-->
<!--                let equipGroup = resp.data.data;-->
<!--                $('#groupId').val(equipGroup.gid)-->
<!--                $('#groupNameInput').val(equipGroup.groupName)-->
<!--                $('#groupDescription').val(equipGroup.description)-->
<!--                $('#countText').text(equipGroup.count)-->
<!--                $('#createTime').text(equipGroup.createTime)-->
<!--                $('#showed').prop('checked', equipGroup.equipmentsShowed)-->
<!--                $('#locked').prop('checked', equipGroup.equipmentsLocked)-->
<!--                let equipments = equipGroup.equipments;-->
<!--                solveEquipments(equipments, equipGroup.groupName)-->
<!--                $('.equipmentNames').each((index, checkbox) => {-->
<!--                    $(checkbox).prop('checked', false)-->
<!--                    for (let equipment of equipments) {-->
<!--                        if (equipment.eid === $(checkbox).val()) {-->
<!--                            $(checkbox).prop('checked', true)-->
<!--                        }-->
<!--                    }-->
<!--                })-->
<!--                formDisabled(true)-->
<!--                resolve(true)-->
<!--            }).catch(err => reject(err))-->
<!--        })-->
<!--    }-->

<!--    // 点击修改按钮，让表单能输入-->
<!--    const clickUpdate = (gid) => {-->
<!--        getGroupDetail(gid).then((success) => {-->
<!--            if (success) {-->
<!--                formDisabled(false)-->
<!--                $('#groupNameInput').focus()-->
<!--            } else {-->
<!--                console.log("获取详细信息失败")-->
<!--            }-->
<!--        })-->
<!--    }-->

<!--    // 更新分组-->
<!--    const updateGroup = () => {-->
<!--        let gid = $('#groupId').val()-->
<!--        let groupName = $('#groupNameInput').val()-->
<!--        if (gid === null || gid === '') {-->
<!--            alert("修改失败，可能是因为页面被恶意篡改")-->
<!--            return-->
<!--        }-->
<!--        if (groupName === null || groupName === '') {-->
<!--            alert("分组名不能为空")-->
<!--            return-->
<!--        }-->
<!--        let ids = []-->
<!--        $('#equipCheckbox input:checked').each(function () {-->
<!--            ids.push($(this).val())-->
<!--        })-->
<!--        let data = {-->
<!--            gid: gid,-->
<!--            groupName: groupName,-->
<!--            description: $("#groupDescription").val(),-->
<!--            equipmentIds: ids,-->
<!--            equipmentsShowed: $("#showed").prop('checked'),-->
<!--            equipmentsLocked: $('#locked').prop('checked')-->
<!--        }-->

<!--        axios({-->
<!--            method: "put",-->
<!--            url: '/equipGroup',-->
<!--            headers: {'Authorization': getToken()},-->
<!--            data: data-->
<!--        }).then(resp => {-->
<!--            if (!resp.data.success) {-->
<!--                alert("系统繁忙，请稍后重试")-->
<!--                return-->
<!--            }-->
<!--            formDisabled(true)-->
<!--            getGroupList(false)-->
<!--            getGroupDetail(gid)-->
<!--            alert("修改成功")-->
<!--        })-->
<!--    }-->

<!--    // 删除分组-->
<!--    const deleteGroup = (gid) => {-->
<!--        let isDelete = confirm(`是否确认删除该设备？`)-->
<!--        if (!isDelete) {-->
<!--            return-->
<!--        }-->
<!--        axios({-->
<!--            method: "delete",-->
<!--            url: `/equipGroup/${gid}`,-->
<!--            headers: {'Authorization': getToken()},-->
<!--        }).then(resp => {-->
<!--            if (resp.data.success) {-->
<!--                $('#group' + gid).remove()-->
<!--            } else {-->
<!--                alert("请检查分组中是否还有设备")-->
<!--            }-->
<!--        })-->
<!--    }-->

<!--    // 查询全部的设备名字-->
<!--    const getEquipmentsNames = () => {-->
<!--        axios({-->
<!--            method: "get",-->
<!--            url: '/equipment/names',-->
<!--            headers: {'Authorization': getToken()},-->
<!--        }).then(resp => {-->
<!--            if (!resp.data.success) return-->
<!--            let equipments = resp.data.data;-->
<!--            let html = ''-->
<!--            equipments.forEach(equipment => {-->
<!--                html += '<div class="checkbox">'-->
<!--                html += '<label>'-->
<!--                html += `<input type="checkbox" class="equipmentNames" value="${equipment.eid}" disabled>`-->
<!--                html += equipment.equipName-->
<!--                html += '</label>'-->
<!--                html += '</div>'-->
<!--            })-->
<!--            $('#equipCheckbox').html(html)-->
<!--        })-->
<!--    }-->
<!--    getEquipmentsNames()-->

<!--    // 查看分组列表-->
<!--    const getGroupList = (isReloadMsg) => {-->
<!--        groupParams.groupName = $('#groupName').val()-->
<!--        groupParams.description = $('#description').val()-->
<!--        groupParams.count = $('#count').val()-->
<!--        let countReg = /^0$|^[1-9]\d*$/-->
<!--        // 如果数量不为空，就要进行正则数字校验，如果校验结果为false，则弹出提示并结束请求-->
<!--        if (groupParams.count !== '' && !countReg.test(groupParams.count)) {-->
<!--            alert("设备数量参数非法")-->
<!--            return-->
<!--        }-->
<!--        axios({-->
<!--            method: "post",-->
<!--            url: '/equipGroup/list',-->
<!--            headers: {'Authorization': getToken()},-->
<!--            data: groupParams-->
<!--        }).then(resp => {-->
<!--            if (!resp.data.success || resp.data.data === null) return-->
<!--            let groupTbodyHtml = ''-->
<!--            let groupOptionHtml = '<option value="-1" disabled="" selected="" hidden="">请选择新分组</option>'-->
<!--            if (isReloadMsg && resp.data.data[0] !== null) {-->
<!--                let group = resp.data.data[0]-->
<!--                getGroupDetail(group.gid)-->
<!--            }-->
<!--            resp.data.data.forEach(group => {-->
<!--                // 封装分组列表栏的html-->
<!--                groupTbodyHtml += `<tr id="group${group.gid}">`-->
<!--                groupTbodyHtml += `<td>${group.groupName}</td>`-->
<!--                groupTbodyHtml += `<td>${group.description}</td>`-->
<!--                groupTbodyHtml += `<td>${group.count}</td>`-->
<!--                groupTbodyHtml += '<td>'-->
<!--                groupTbodyHtml += `<button type="button" class="btn btn-primary dropdown-toggle" onclick="getGroupDetail(\'${group.gid}\')">`-->
<!--                groupTbodyHtml += '查看'-->
<!--                groupTbodyHtml += '</button>&nbsp;'-->
<!--                groupTbodyHtml += `<button type="button" class="btn btn-primary dropdown-toggle" onclick="clickUpdate(\'${group.gid}\')">`-->
<!--                groupTbodyHtml += '修改'-->
<!--                groupTbodyHtml += '</button>&nbsp;'-->
<!--                groupTbodyHtml += `<button type="button" class="btn btn-danger dropdown-toggle" onclick="deleteGroup(\'${group.gid}\')">`-->
<!--                groupTbodyHtml += '删除'-->
<!--                groupTbodyHtml += '</button>'-->
<!--                groupTbodyHtml += '</td>'-->
<!--                groupTbodyHtml += '</tr>'-->
<!--                // 封装移出本组遮罩层的html-->
<!--                groupOptionHtml += `<option value="${group.gid}" style="color: black;">${group.groupName}</option>`-->
<!--            })-->
<!--            $('#groupTbody').html(groupTbodyHtml)-->
<!--            $('#equipGroupNames').html(groupOptionHtml)-->
<!--        })-->
<!--    }-->
<!--    getGroupList(true)-->

<!--    // 点击查询按钮-->
<!--    $('#searchBtn').click(() => {-->
<!--        getGroupList(true)-->
<!--    })-->

<!--    // 点击移动分组的确认按钮-->
<!--    $('#moveBtn').click(() => {-->
<!--        equipmentMoveGroup()-->
<!--    })-->

<!--    // 更新操作中的保存按钮-->
<!--    $('#saveBtn').click(() => {-->
<!--        updateGroup()-->
<!--    })-->
<!--</script>-->

</body>
</html>